<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            Vue对象的数据仓库中的变量 
            注：可以绑定任意类型的变量，且最终会被转换为字符串显示在页面中
        -->
        <p>{{name}}</p>
        <p>{{age}}</p>
        <p>{{flag}}</p>
        <p>{{arr}}</p>
        <p>{{user}}</p>
        <!-- null和undefined最终会以空字符串方式输出显示 -->
        <p>{{hobby}}</p>
        <p>{{address}}</p>
        <!-- 当Vue实例的数据仓库中不存在指定变量时会报错 -->
        <!-- <p>{{height}}</p> -->
        <hr>

        <!-- 
            简单的JS表达式
         -->
        <p>{{ 'alice' }}</p> <!-- 匿名变量 --> 
        <p>{{ 20 }}</p>
        <p>{{ true }}</p>
        <p>{{ [1,2,3,4] }}</p>
        <p>{{ {id:1001,name:'tom'} }}</p>
        <!-- 可以进行简单的js运算 -->
        <p>{{age+2}}</p>
        <p>{{flag&&false}}</p>
        <p>{{age>=25}}</p>
        <p>{{age>=18?'成年':'未成年'}}</p>
        <p>{{user.id}}</p>
        <p>{{arr[1]}}</p>
        <hr>

         <!-- 
            JS内置对象
         -->
         <p>{{ new Date() }}</p>
         <p>{{ Math.random() }}</p>
         <p>{{ Math.ceil(2.6) }}</p>
         <p>{{ Math.PI }}</p>
        <hr>

        <!-- 
            标签格式字符串的处理
                textContent 当文本中出现转义符时会直接保留特性向页面输出，如\n 只会在代码中输出为换行，页面中并不会换行
                innerText 当文本中出现转义符时会进行解析，如\n 会被解析为<br>
         -->
        <p>{{str}}</p>
       
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'tom',
            age:19,
            flag:true,
            arr:[12,4,2,123,6],
            user:{
                id:9527,
                name:'唐伯虎',
                sex:'男'
            },
            hobby:null,
            address:undefined,

            str:'<h3>wel\ncome t\to vue</h3>'
        }
    });
</script>
</html>